<script setup lang="ts">
import selectedImage from '../assets/selected.png';
import unSelectedImage from '../assets/unselected.png';
import {reactive} from "vue";

let datas = reactive([
  {label: '西安站', completed: true,totalCount:100,completedPeople:50,learningPlan:false},
  {label: '西安车务段', completed: false,totalCount:100,completedPeople:50,learningPlan:true},
  {label: '西安西站', completed: false,totalCount:100,completedPeople:50,learningPlan:true},
  {label: '新丰镇站', completed: false,totalCount:100,completedPeople:50,learningPlan:true},
  {label: '安康车务段', completed: false,totalCount:100,completedPeople:50,learningPlan:true},
  {label: '安康东站', completed: false,totalCount:100,completedPeople:50,learningPlan:true},
  {label: '汉中车务段', completed: false,totalCount:100,completedPeople:50,learningPlan:true},
  {label: '宝鸡东站', completed: false,totalCount:100,completedPeople:50,learningPlan:true},
  {label: '铜川车务段', completed: false,totalCount:100,completedPeople:50,learningPlan:true},
  {label: '延安车务段', completed: false,totalCount:100,completedPeople:50,learningPlan:false},
  {label: '延安运营维修段', completed: false,totalCount:100,completedPeople:50,learningPlan:false},
  {label: '韩城车务段', completed: false,totalCount:100,completedPeople:50,learningPlan:false},
])

// 创建一个函数来返回当前图像
const currentImage = (show: boolean) => {
  return show ? selectedImage : unSelectedImage;
};

</script>

<template>
  <div style="display: flex;flex-wrap: wrap;">
  <div v-for="(elment,index) in datas" class="mainStyle" :key="index">
    <div class="btnStyleTop" :class="{'btnStyleTopNo':!elment.learningPlan}">
      <div style="font-size: 20px;font-weight: bold">{{elment.label}}</div>
      <img :src="currentImage(elment.learningPlan)" width="25px" height="25px">
    </div>
      <div class="btnStyleBottom" :class="{'btnStyleBottomNo':!elment.learningPlan}">
        <div v-show="elment.learningPlan">覆盖人：{{elment.totalCount}}</div>
        <div v-show="elment.learningPlan">已学习人数：{{elment.completedPeople}}</div>
        <div v-show="!elment.learningPlan">暂无相关培训计划</div>
      </div>
  </div>
  </div>
</template>

<style scoped>
.mainStyle{
  margin-right: 60px;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  width: 240px;
  height: 102px;
}

.btnStyleTop{
  background: #EAF3FF;
  border-radius: 6px 6px 0px 0px;
  width: 240px;
  height: 100%;
  display: flex;
  justify-content: space-between;
  padding-top: 20px;
  padding-right: 20px;
  padding-left: 20px;
  flex-direction: row;
}

.btnStyleTopNo{
  background: #FFF5DD;
}

/*有学习计划的样式默认样式*/
.btnStyleBottom{
  background-color:#EAF3FF;
  height: 120px;
  width: 240px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-right: 20px;
  padding-left: 20px;
  border-radius: 0px 0px 6px 6px;
  background-image: url('../assets/blue_btoom_small.png'); /* 设置背景图片 */
  background-size: cover; /* 让背景图片覆盖整个容器 */
  background-position: center; /* 居中背景图片 */
  background-repeat: no-repeat; /* 不重复背景图片 */
}

/*没有学习计划的样式*/
.btnStyleBottomNo{
  background-color:#FFF5DD;
  background-image: url('../assets/yellow_btn_bottom.png'); /* 设置背景图片 */
}

</style>